.ml-col {
  box-sizing: border-box;
  float: left;
}
@for $i from 0 through 24 {
  .ml-col-#{$i} {
    width: $i / 24 * 100%;
  }
  .ml-col-offset-#{$i} {
    margin-left: $i / 24 * 100%;
  }
  .ml-col-push-#{$i} {
    position: relative;
    left: $i / 24 * 100%;
  }
  .ml-col-pull-#{$i} {
    position: relative;
    right: $i / 24 * 100%;
  }
}
// xs < 768px
.ml-col-xs-0 {
    display: none;
  }
@media only screen and (max-width: 768px-1) {
  
  @for $i from 0 through 24 {
    .ml-col-xs-#{$i} {
      width: $i / 24 * 100%;
    }
    .ml-col-xs-offset-#{$i} {
      margin-left: $i / 24 * 100%;
    }
    .ml-col-xs-push-#{$i} {
      position: relative;
      left: $i / 24 * 100%;
    }
    .ml-col-xs-pull-#{$i} {
      position: relative;
      right: $i / 24 * 100%;
    }
  }
}
// sm >= 768px
.ml-col-sm-0 {
    display: none;
  }
@media only screen and (min-width: 768px) {
  
  @for $i from 0 through 24 {
    .ml-col-sm-#{$i} {
      width: $i / 24 * 100%;
    }
    .ml-col-sm-offset-#{$i} {
      margin-left: $i / 24 * 100%;
    }
    .ml-col-sm-push-#{$i} {
      position: relative;
      left: $i / 24 * 100%;
    }
    .ml-col-sm-pull-#{$i} {
      position: relative;
      right: $i / 24 * 100%;
    }
  }
}
// md >= 992px
.ml-col-md-0 {
    display: none;
  }
@media only screen and (min-width: 992px) {
  
  @for $i from 0 through 24 {
    .ml-col-md-#{$i} {
      width: $i / 24 * 100%;
    }
    .ml-col-md-offset-#{$i} {
      margin-left: $i / 24 * 100%;
    }
    .ml-col-md-push-#{$i} {
      position: relative;
      left: $i / 24 * 100%;
    }
    .ml-col-md-pull-#{$i} {
      position: relative;
      right: $i / 24 * 100%;
    }
  }
}
// lg >= 1200px
.ml-col-lg-0 {
    display: none;
  }
@media only screen and (min-width: 1200px) {
  
  @for $i from 0 through 24 {
    .ml-col-lg-#{$i} {
      width: $i / 24 * 100%;
    }
    .ml-col-lg-offset-#{$i} {
      margin-left: $i / 24 * 100%;
    }
    .ml-col-lg-push-#{$i} {
      position: relative;
      left: $i / 24 * 100%;
    }
    .ml-col-lg-pull-#{$i} {
      position: relative;
      right: $i / 24 * 100%;
    }
  }
}
// xl >= 1920px
.ml-col-xl-0 {
    display: none;
  }
@media only screen and (min-width: 1920px) {
  
  @for $i from 0 through 24 {
    .ml-col-xl-#{$i} {
      width: $i / 24 * 100%;
    }
    .ml-col-xl-offset-#{$i} {
      margin-left: $i / 24 * 100%;
    }
    .ml-col-xl-push-#{$i} {
      position: relative;
      left: $i / 24 * 100%;
    }
    .ml-col-xl-pull-#{$i} {
      position: relative;
      right: $i / 24 * 100%;
    }
  }
}